<template>
	<div class="user-center">
		<template v-if="user">
			<Myself/>
			<HeaderList :list="list"/>
		</template>
		<template v-else>
			<LoginBtn/>
		</template>
		<div class="btn-box" :ref="reference" @mouseenter="hover(reference, true)" @mouseleave="hover(reference, false)">
			<Button>投稿</Button>
		</div>
	</div>
</template>

<script>
import Myself from "./Myself"
import HeaderList from "./HeaderList"
import LoginBtn from './LoginBtn'

export default{
	data(){
		return {
			unLoginPops: [
				{
					name: 'unLogin',
					target: null,
					offset: {
						x: -140,
						y: 10
					}
				},{
					name: 'reference',
					target: null,
					offset: {
						x: -172,
						y: 10
					}
				}
			],
			loginPops:[
				{
					name: 'myself',
					target: null,
					offset: {
						x: -50,
						y: 10
					}
				},{
					name: 'member',
					target: null,
					offset: {
						x: -50,
						y: 10
					}
				},{
					name: 'news',
					target: null,
					offset: {
						x: -50,
						y: 10
					}
				},{
					name: 'dynamic',
					target: null,
					offset: {
						x: -50,
						y: 10
					}
				},{
					name: 'collect',
					target: null,
					offset: {
						x: -50,
						y: 10
					}
				},{
					name: 'history',
					target: null,
					offset: {
						x: -50,
						y: 10
					}
				},{
					name: 'reference',
					target: null,
					offset: {
						x: -172,
						y: 10
					}
				},
			],
			list: [
				{
					id: 1,
					text: '大会员',
					to: '',
					name: 'member'
				},{
					id: 2,
					text: '消息',
					to: '',
					num: 2,
					name: 'news'
				},{
					id: 3,
					text: '动态',
					to: '',
					name: 'dynamic'
				},{
					id: 4,
					text: '收藏',
					to: '',
					name: 'collect'
				},{
					id: 5,
					text: '历史',
					to: '',
					name: 'history'
				},{
					id: 6,
					text: '创作中心',
					to: ''
				}
			],
			reference: 'reference',
			myself: 'myself'
		}
	},
	computed:{
		user(){
			let user = this.$store.state.users.user;
			// this.$nextTick(()=>{
			// 	let arr = this.user ? this.loginPops : this.unLoginPops;
			// 	for(let item of arr){
			// 		item.target = this.$refs[item.name][0]||this.$refs[item.name];
			// 		this.$emit('getPosi', item);
			// 	}
			// })
			return user;
		}
	},
	methods:{
		// 移入显示浮窗移出隐藏
		hover(name, show){
			if(!name) return;
			this.$store.commit('pops/setPopsShow', {name, show})
		},
		// 根据元素设置起始位置，这里获取了所有有ref属性的元素
		getPosi(){
			let items = this.$refs;
			for(let name in items){
				let target = items[name][0] || items[name]
				this.$store.commit('pops/getComputedPosi', {name, target})
			}
		}
	},
	mounted(){
		this.getPosi();
	},
	components:{
		Myself,
		HeaderList,
		LoginBtn
	}
}
</script>

<style lang="less" scoped>
.user-center{
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 12px;
	.btn-box{
		cursor: pointer;
		.btn{
			width: 100px;
			height: 36px;
			line-height: 36px;
			margin-left: 14px;
			color: #fff;
			background-color: #FB7299;
			font-size: 14px;
			border-radius: 2px;
		}
	}
}
</style>
